<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .wrapper {
      margin: 0 auto 100px;
      max-width: 960px;
    }

    .stage {
      list-style: none;
      padding: 0;
    }

    .scene {
      width: 260px;
      height: 400px;
      margin: 30px;
      float: left;
      perspective: 1000px;
    }

    .scene .movie {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: translateZ(-130px);
      transition: transform 350ms;
    }

    .scene .movie:hover {
      transform: rotateY(-90deg) translateZ(20px);
    }

    .movie .poster,
    .movie .info {
      position: absolute;
      width: 260px;
      height: 400px;
      background-color: #fff;
      backface-visibility: hidden;
    }

    .movie .poster {
      transform: translateZ(130px);

      background-size: auto 100%;
      background-repeat: no-repeat;
    }

    
    .scene:nth-child(1) .movie .poster {
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561832662693&di=9d590490b8f5a1b9813a7e4789e54972&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fent%2Ftransform%2F20170614%2FkGCX-fyfzhac2151681.jpg);
}
.scene:nth-child(2) .movie .poster {
  background-image: url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1561822565&di=5173334c68af615b41b5d1db0042f4ea&src=http://hbimg.b0.upaiyun.com/9551d3f669f56e944df39e39c8c9197a5043a0be236af-oWIH4S_fw658);
}
.scene:nth-child(3) .movie .poster {
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561832662693&di=bb2475fd8676935110429fc5043e153c&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fdd7502afc6d61b2de2acd81d9036b82ac76224f845340-WbI7YI_fw658);
}
.scene:nth-child(4) .movie .poster {
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561832662693&di=402f5075c8f715c1b1348eb4334d4e8c&imgtype=0&src=http%3A%2F%2Fimg1.cache.netease.com%2Fcatchpic%2FF%2FFE%2FFE58D6CAA95E978ECDE1A03BCB1D4709.jpg);
}
.scene:nth-child(5) .movie .poster {
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561832662693&di=57ecbf6e0d670ffa6285a38a14c350b4&imgtype=0&src=http%3A%2F%2Fimages.rednet.cn%2Farticleimage%2F2014%2F08%2F26%2F0955599234.jpg);
}
.scene:nth-child(6) .movie .poster {
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561832662693&di=8e8c11df35052f0c3a3321c1d73a8480&imgtype=0&src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F337%2F44530.jpg);
}
 

    .movie .info {
      transform: rotateY(90deg) translateZ(130px);
      border: 1px solid #B8B5B5;
      font-size: 0.75em;
      padding: 0 10px;
    }

    .movie::after {
      content: '';
      width: 260px;
      height: 260px;
      position: absolute;
      bottom: 0;
      box-shadow: 0 30px 50px rgba(0, 0, 0, .3);
      transform-origin: 100% 100%;
      transform: rotateX(90deg) translateY(130px);
      transition: box-shadow 350ms;
    }

    .movie:hover::after {
      box-shadow: 20px -5px 50px rgba(0, 0, 0, 0.3);
    }

    .movie .poster,
    .movie .info,
    .movie .info header {
      transition: box-shadow 350ms;
    }

    .movie .poster {
      box-shadow: inset 0px 0px 40px rgba(255, 255, 255, 0);
    }

    .movie:hover .poster {
      box-shadow: inset 300px 0px 40px rgba(255, 255, 255, 0.8);
    }
    
.movie .info,
.movie .info header {
  box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}
.movie:hover .info,
.movie:hover .info header {
  box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
} 

    h1 {
      text-align: center;
    }

    .movie .info p {
      text-indent: 2em;
    }
  </style>
</head>

<body>


  <div class="wrapper">
    <ul class="stage">
      <li class="scene">
        <div class="movie">
          <div class="poster img"></div>
          <div class="info">
            <header>
              <h1>It's a Wonderful Life</h1>
              <span class="year">1946</span>
              <span class="rating">PG</span>
              <span class="duration">130 minutes</span>
            </header>
            <p>
              In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being
              from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to
              save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with
              Clarence.
            </p>
          </div>
        </div>
      </li>

      <li class="scene">
        <div class="movie">
          <div class="poster"></div>
          <div class="info">
            <header>
              <h1>It's a Wonderful Life</h1>
              <span class="year">1946</span>
              <span class="rating">PG</span>
              <span class="duration">130 minutes</span>
            </header>
            <p>
              In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being
              from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to
              save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with
              Clarence.
            </p>
          </div>
        </div>
      </li>
      <li class="scene">
          <div class="movie">
            <div class="poster"></div>
            <div class="info">
              <header>
                <h1>It's a Wonderful Life</h1>
                <span class="year">1946</span>
                <span class="rating">PG</span>
                <span class="duration">130 minutes</span>
              </header>
              <p>
                In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being
                from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to
                save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with
                Clarence.
              </p>
            </div>
          </div>
        </li>
        <li class="scene">
            <div class="movie">
              <div class="poster"></div>
              <div class="info">
                <header>
                  <h1>It's a Wonderful Life</h1>
                  <span class="year">1946</span>
                  <span class="rating">PG</span>
                  <span class="duration">130 minutes</span>
                </header>
                <p>
                  In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being
                  from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to
                  save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with
                  Clarence.
                </p>
              </div>
            </div>
          </li>
          <li class="scene">
              <div class="movie">
                <div class="poster"></div>
                <div class="info">
                  <header>
                    <h1>It's a Wonderful Life</h1>
                    <span class="year">1946</span>
                    <span class="rating">PG</span>
                    <span class="duration">130 minutes</span>
                  </header>
                  <p>
                    In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being
                    from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to
                    save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with
                    Clarence.
                  </p>
                </div>
              </div>
            </li>
            <li class="scene">
                <div class="movie">
                  <div class="poster"></div>
                  <div class="info">
                    <header>
                      <h1>It's a Wonderful Life</h1>
                      <span class="year">1946</span>
                      <span class="rating">PG</span>
                      <span class="duration">130 minutes</span>
                    </header>
                    <p>
                      In Bedford Falls, New York on Christmas Eve, George Bailey is deeply troubled. Prayers for his well-being
                      from friends and family reach Heaven. Clarence Odbody, Angel Second Class, is assigned to visit Earth to
                      save George, thereby earning his wings. Franklin and Joseph, the head angels, review George's life with
                      Clarence.
                    </p>
                  </div>
                </div>
              </li>
    </ul>
  </div>
</body>

</html>